<template>
   <div class="channel-edit">
      <van-cell center :border="false">
         <div slot="title">我的频道</div>
         <van-button type="danger" plain round size="mini" @click="isEdit = !isEdit">
            {{ isEdit ? '完成' : '编辑'}}
         </van-button>
      </van-cell>

      <van-grid :gutter="10">
         <van-grid-item 
         :class="{active : index === active}"
         :icon=" (isEdit && index !==0) ? 'clear' : '' " 
         v-for="(channel,index) in userChannels" :key="index" 
         :text="channel.name" 
         @click="onUserChannelClick(channel,index)"/>
      </van-grid>

      <van-cell center :border="false">
         <div slot="title">频道推荐</div>
      </van-cell>

      <van-grid :gutter="10">
         <van-grid-item v-for="(channel,index) in recommendChannels" :key="index" :text="channel.name" @click="onAdd(channel)" />
      </van-grid>
   </div>
</template>
<script>
import { setItem } from '@/utils/stroage'
import {getAllChannels, addUserChannel, deleteUserChannel} from '@/api/channel'
   export default {
      name: "ChannelEdit",
      props:{
         userChannels:{
            type:Array,
            required:true
         },
         active:{
            type:Number,
            required:true
         }
      },
      data() {
         return {
            allChannels:[],
            isEdit:false
         }
      },
      computed:{
         //推荐
         recommendChannels(){
            return this.allChannels.filter(channel =>{
               return ! this.userChannels.find(userChannel =>{
                  return userChannel.id === channel.id
               })
               
            })
            // const arr = []
            // this.allChannels.forEach(channel =>{
            //    let flag =false
            //    for(let i =0; i < this.userChannels.length; i++){
            //       if(this.userChannels[i].id === channel.id){
            //          flag =true
            //          break
            //       }
            //    }
            //    if(!flag){
            //      arr.push(channel)
            //    }
            // })
            // return arr
           
         }
      },
      created(){
         this.loadChannels()
      },
      methods: {
         async loadChannels(){
            const res = await getAllChannels()
            // console.log(res)
            this.allChannels= res.data.data.channels
         },
         async onAdd(channel){
            this.userChannels.push(channel)
            //数据持久化
            if(this.user){
               await addUserChannel({
                  channels:[
                     {id:channel.id ,seq:this.userChannels.length}
                  ]
               })
            }else{
               setItem('user-channels', this.userChannels)
            }
         },
          async deleteChannel(channel,index){
            //删除index之前的频道
            if(index <= this.active){
               //跟新索引
               this.$emit('update-active',this.active -1)
            }
            this.userChannels.splice(index,1)
            //数据持久化
           if (this.user) {
            // 登录了，持久化到线上
            await deleteUserChannel(channel.id)
            } else {
            // 没有登录，持久化到本地
            setItem('user-channels', this.userChannels)
            }
         },
         switchChannel(index){
            //切换频道
            this.$emit('update-active',index)
            //关闭弹出层
            this.$emit('close')
         },
         onUserChannelClick(channel,index ){
            if(this.isEdit && index !==0){
               this.deleteChannel(channel,index)
            }else{
               this.switchChannel(index)
            }
         }
      }
   }
</script>
<style lang="scss" scoped>
   .channel-edit {
      padding-top: 54px
   }
   ::v-deep .van-grid-item__content{
      position: relative;
   }
   ::v-deep .van-grid-item__icon{
      position: absolute;
      right: -10px;
      top: -10px;
      font-size: 26px;
      color: #ccc;
   }
   ::v-deep .van-grid-item__icon+.van-grid-item__text{
      margin-top: 0;
   }
   .active{
      ::v-deep .van-grid-item__text{
         color:red 
      }
   }
</style>